<template>
  <div>
    <!-- <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" /> -->
    <div class="img" v-html="tabdata"></div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { gettabbar } from '../../request/http'
import axios from '../../request/axios'
const onClickLeft = () => history.back()
const route = useRoute()
const { id } = route.params
console.log(id)
const tabdata = ref('')
// gettabbar(id as string).then((res) => {
//   console.log(res.data)
//   tabdata.value = res.data

//   console.log(tabdata.value)
// })
nextTick(() => {
  gettabbar(id as string)
    .then((res) => {
      console.log(res, 'img')
      tabdata.value = res.data.content
      console.log(tabdata.value, 'img')

      // 确保 DOM 更新完成后再查询 img
      nextTick(() => {
        const image = document.querySelectorAll('.img  img')
       if (image.length > 0) {
          image.forEach((image) => {
            image.style.maxWidth = "100%"; // 设置最大宽度
            image.style.height = "auto"; // 自适应高度
          });
        } else {
          console.log('未找到 img 元素');
        }
      })
    })
    .catch((error) => {
      console.error('获取图片列表失败:', error)
    })
})

// onMounted(() => {
//   setTimeout(() => {
//     window.location.href = tabdata.value
//   }, 1000)
// })
//  const fetchContent = async (url: string) => {
//       try {
//         const response = await axios.get(url);
//         content.value = response.data;
//       } catch (error) {
//         console.error('Fetch error:', error);
//       }
//     };
//     fetchContent(tabdata.value)
//  })
</script> 

<style lang="scss" scoped>
</style>